<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>知乎</span>

              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="linkUrl(zhihu.url)"
                >前往</el-button
              >

              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="openSubscribe('zhihu')"
                >订阅</el-button
              >
            </div>

            <el-table
              :show-header="false"
              :data="zhihu.info"
              height="250"
              style="width: 100%"
              @row-click="clickRow"
            >
              <el-table-column type="index"></el-table-column>
              <el-table-column prop="query"> </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>微博</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="linkUrl(weibo.url)"
                >前往</el-button
              >
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="openSubscribe('weibo')"
                >订阅</el-button
              >
            </div>

            <el-table
              :show-header="false"
              :data="weibo.info"
              height="250"
              style="width: 100%"
              @row-click="clickRow"
            >
              <el-table-column type="index"></el-table-column>
              <el-table-column prop="name"> </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>抖音</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="linkUrl(douyin.url)"
                >前往</el-button
              >
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="openSubscribe('douyin')"
                >订阅</el-button
              >
            </div>

            <el-table
              :show-header="false"
              :data="douyin.info"
              height="250"
              style="width: 100%"
            >
              <el-table-column type="index"></el-table-column>
              <el-table-column prop="name"> </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      zhihu: {
        url: "https://www.zhihu.com",
        info: [],
      },

      weibo: {
        url: "https://www.zhihu.com",
        info: [],
      },

      douyin: {
        url: "https://www.douyin.com",
        info: [],
      },

      // 用户的邮箱和订阅的频道
      userEmail: "",
      subscribeChannel: "",
    };
  },
  methods: {
    // 点击后到达的网址
    linkUrl(url) {
      window.open(url);
    },

    // 点击后提交邮件
    openSubscribe(channel) {
      this.subscribeChannel = channel; // 绑定订阅的频道
      this.$prompt("请输入邮箱", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern:
          /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: "邮箱格式不正确",
      })
        .then((value) => {
          this.userEmail = value; // 获取用户的邮箱
          this.$axios({
            url: "http://127.0.0.1:5000/api/info/subscribe",
            method: "post",
            data: JSON.stringify({
              emial: this.userEmail.value,
              kind: this.subscribeChannel,
            }),
            headers: {
              "Content-Type": "application/json",
            },
          }).then((response) => {
            this.$message({
              type: "success",
              message: "您已经成功订阅",
            });
            console.log(response);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    // 点击每一项之后
    clickRow(row, event, column) {
      console.log(row);
      window.open(row.url);
    },
  },

  mounted() {
    this.$axios({
      url: "http://127.0.0.1:5000/api/info/index",
      method: "get",
      headers: {
        "Content-Type": "application/json",
      },
    }).then((response) => {
      console.log(response.status);
      let data = response.data.data
      this.zhihu.info = data.zhihu.list
      this.weibo.info = data.weibo.list
      this.douyin.info = data.douyin.list
      console.log(data);
    });
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}

.el-button {
  margin-left: 20px;
}
</style>
